<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../style//font/alifont.css">
  <link rel="stylesheet" href="../style/19.css">
</head>
<body>
  <div class="container">
    <div class="left-box">
      <ul>
        <li class="item active">
        <i class="iconfont icon-24gl-fileText"></i>文件
        </li>
        <li class="item">
          <i class="iconfont icon-tupian"></i>相册
        </li>
        <li class="item">
          <i class="iconfont icon-jushoucang"></i>收藏夹
        </li>
        <li class="item">
          <i class="iconfont icon-baoxianxiang"></i>保险箱
        </li>
        <li class="item">
          <i class="iconfont icon-dingyue"></i>订阅
        </li>
        <li class="item">
          <i class="iconfont icon-shanchu"></i>回收站
        </li>
        <hr>
        <li class="item">
          <i class="iconfont icon-chuanshuliebiao"></i>传输列表
        </li>
      </ul>
      <div class="user-info">
        <img src="../images/2.jpg" alt="">
        <span>海贼小子</span>
        <i class="iconfont icon-gear"></i>
      </div>
    </div>
    <div class="right-box">
      <div class="top">
        <span class="current-tag">文件</span>
        <div class="btn">
          <i class="iconfont icon-sousuo"></i>
        </div>
        <div class="btn">
          <i class="iconfont icon-jiahao"></i>

        </div>
      </div>
      <div class="middle">i'm Rister</div>
      <div class="handler"></div>
    </div>
  </div>
  <script>
    let items=document.querySelectorAll('.item')
    let currentTag=document.querySelector('.current-tag')
    let handler=document.querySelector('.handler')
    let leftBox=document.querySelector('.left-box')

    function setActive(){
      items.forEach(item=>{
        item.classList.remove('active')
      })
      // 这个this是调用者实例，for循环使用
      this.classList.add('active')
      currentTag.innerHTML=this.innerText
    }
    items.forEach(item=>{
      item.addEventListener('click',setActive)
    })
    handler.addEventListener('click',function(){
      if(!this.classList.contains('close')){
        leftBox.style.width=0
        this.classList.add('close')
      }else{
        leftBox.style.width=250+'px'
        this.classList.remove('close')
      }
    })
  </script>
</body>
</html>